<template>
  <view class="container">
    <pap-navbar :title="title" back />
    <filterQuery
      :equipmentType="equipmentType"
      ref="searchRef"
      @changeCallBack="changeCallBack"
    />
    <view class="tips">当前共有 {{ total }} 台设备</view>
    <!-- 水泥 -->
    <scroll-view
      id="scrollView"
      class="grow min-h-0 content-warpper"
      :style="{ height: scrollHeight + 'px', marginTop: 20 + 'rpx' }"
      scroll-y="true"
    >
      <!-- 水泥 -->
      <view
        class="device"
        v-if="equipmentType.trim() == 'cement_concrete_mixer'"
      >
        <view
          class="deviceBox"
          v-for="(item, index) in equipmentsList"
          :key="index"
          @click="handleSwitch('/subPages/mixing-plant/record/index', item)"
        >
          <view class="title"
            >{{ item.equipmentName }}
            <u-icon name="arrow-right"></u-icon>
          </view>
          <view style="margin: 16rpx 0; color: #bebebe; font-size: 14px"
            >最新出料时间 {{ item.dischargeTime }}</view
          >
          <view class="parameter">
            <view
              >配比名称：{{ item.constructionMixProportionName || '-' }}</view
            >
            <view>方量：{{ item.actualVolume }}</view>
            <view>搅拌时长：{{ item.mixingTime }}</view>
            <view>浇筑部位：{{ item.pouringLocation }}</view>
          </view>
          <view class="num">设备编号：{{ item.equipmentNo }}</view>
        </view>
      </view>
      <!-- 水稳 -->
      <view
        class="device"
        v-else-if="equipmentType.trim() == 'cement_stabilized_soil_mixer'"
      >
        <view
          v-for="(item, index) in equipmentsList"
          :key="index"
          class="deviceBox"
          @click="
            handleSwitch(
              `/subPages/mixing-plant/record/index?type=1&num=${item.equipmentNo}&name=${item.equipmentName}&id=${item.id}}`,
              item
            )
          "
        >
          <view class="title"
            >{{ item.equipmentName }}
            <u-icon name="arrow-right"></u-icon>
          </view>
          <view style="margin: 16rpx 0; color: #bebebe; font-size: 14px"
            >最新出料时间 {{ item.dischargeTime }}
          </view>
          <view class="parameter">
            <view>盘重(kg)：{{ item.actualTotal }}</view>
            <view>配比名称：{{ item.proportionMixtureStabilizedName }}</view>
          </view>
          <view class="num">设备编号:{{ item.equipmentNo }}</view>
        </view>
      </view>
      <!-- 沥青 -->
      <view class="device" v-else>
        <view
          v-for="(item, index) in equipmentsList"
          :key="index"
          class="deviceBox"
          @click="
            handleSwitch('/subPages/mixing-plant/record/index?type=2', item)
          "
        >
          <view class="title"
            >{{ item.equipmentName }}
            <u-icon name="arrow-right"></u-icon>
          </view>
          <view style="margin: 16rpx 0; color: #bebebe; font-size: 14px"
            >最新出料时间 {{ item.dischargeTime }}</view
          >
          <view class="parameter">
            <view>生产层面：{{ item.worksSurfaceCourse }}</view>
            <view>盘重(kg)：{{ item.actualTotal }}</view>
            <view> 配比名称：{{ item.proportionMixtureName }} </view>
          </view>
          <view class="num">设备编号:{{ item.equipmentNo }}</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import filterQuery from '../components/filterQuery/index'
import {
  getAsphaltListApi,
  getAsphaltDetailApi
} from '@/api/mixing-plant/asphalt'
export default {
  components: { filterQuery },
  data() {
    return {
      startX: 0,
      title: '',
      equipmentType: '',
      total: 0,
      sys: uni.$u.sys(),
      equipmentsList: [],
      equipmentType: ''
    }
  },
  onLoad(options) {
    this.equipmentType = options.equipmentType
    switch (options.equipmentType) {
      case 'cement_concrete_mixer':
        this.title = '水泥砼设备列表'
        break
      case 'cement_stabilized_soil_mixer':
        this.title = '水稳设备列表'
        break
      default:
        this.title = '沥青设备列表'
    }
  },
  async mounted() {
    // 一进页面就获取所有区域的id
    await this.$refs.searchRef.getOrgList(4, true)
    // 获取设备列表
    await this.$refs.searchRef.getEquipmentsList(4)
  },
  methods: {
    changeCallBack() {
      this.equipmentsList = this.$refs.searchRef.equipmentsList
      this.total = this.equipmentsList.length
    },
    touchStart(e) {
      if (e.touches.length == 1) {
        this.startX = e.touches[0].clientX
        console.log(this.startX)
      }
    },
    touchEnd(e) {
      if (e.changedTouches.length == 1) {
        var endX = e.changedTouches[0].clientX
        let diff = endX - this.startX
        console.log(diff)
        if (Math.abs(diff) > 100) {
          if (diff > 0) {
            //左滑
            console.log('触发了触发了')
            this.leftClick()
          }
        }
      }
    },
    handleSwitch(url, item) {
      let src
      console.log(item)
      if (this.equipmentType == 'cement_stabilized_soil_mixer') {
        // 水稳
        let info = {
          num: item.equipmentNo,
          name: item.equipmentName,
          tendersName: item.tendersName,
          id: item.id
        }
        src = `/subPages/mixing-plant/record/index?type=1&info=${encodeURIComponent(
          JSON.stringify(info)
        )}`
      } else if (this.equipmentType == 'cement_concrete_mixer') {
        // 水泥
        let info = {
          num: item.equipmentNo,
          name: item.equipmentName,
          tendersName: item.tendersName
        }
        src = `${url}?type=0&info=${encodeURIComponent(JSON.stringify(info))}`
      } else {
        // 沥青
        src = `/subPages/mixing-plant/record/index?type=2&info=${encodeURIComponent(
          JSON.stringify(item)
        )}`
      }
      uni.navigateTo({
        url: src
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  .content-warpper {
    overflow: auto;
    background-color: #f7f7f7;
  }
  .query {
    padding: 0 40px;
    height: 180px;
    background-color: #fff;

    .button {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      view {
        width: 45%;
        height: 70rpx;
        border-radius: 30px;
        line-height: 70rpx;
        text-align: center;
      }
      .confirm {
        background-color: #5284c1;
        color: #fff;
      }
      .reset {
        background-color: #f1f1f1;
      }
    }
  }
  .tips {
    padding: 10px 20px 0;
    color: #6c6b6b;
    font-size: 20rpx;
    text-align: right;
  }
  .device {
    //   overflow: auto;
    font-size: 14px;
    padding: 0 10px;
    .deviceBox {
      padding: 10px 15px;
      border-radius: 10px;
      background-color: #fff;
      margin: 10px 0;
      .title {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 700;
        color: #5284c1;
      }
      .parameter {
        font-family: PingFangSC-regula;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        view:nth-child(1),
        view:nth-child(2) {
          width: 48%;
          text-overflow: ellipsis; /* 溢出显示省略号 */
          overflow: hidden; /* 溢出隐藏 */
          white-space: nowrap; /* 强制不换行 */
        }
        view:nth-child(3) {
          margin: 10rpx 0;
        }
        view:nth-child(4),
        view:nth-child(3) {
          width: 100%;
          text-overflow: ellipsis; /* 溢出显示省略号 */
          overflow: hidden; /* 溢出隐藏 */
          white-space: nowrap; /* 强制不换行 */
        }
      }
      .num {
        margin-top: 20rpx;
        text-align: right;
        color: #bebebe;
        font-size: 14px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
  ::v-deep {
    .u-line {
      display: none;
    }
    .u-input--radius,
    .u-input--square {
      border-radius: 20px;
      border: none;
      background-color: #f1f1f1;
    }
  }
}
</style>
